<template>
<div class="option-design">
  <div class="content">
    <el-input v-model="text" placeholder="选项" resize="both" @change="changeText"></el-input>
    <el-input v-model="description" placeholder="选项说明" resize="both" @change="changeDes"></el-input>
  </div>
  <div class="actions">
    <div class="action">
      <el-checkbox class="isadmit" v-model="isDefault" @change="changeDefault">默认</el-checkbox>
    </div>
    <div class="action">
      <insert-option @addOption="addOption"></insert-option>
      <delete-option @deleteOption="deleteOption"></delete-option>
    </div>
    <div class="action">
      <up @upmove="upmove"></up>
      <down @downmove="downmove"></down>
    </div>
  </div>
</div>
  
</template>

<script>
import InsertOption from './editbutton/InsertOption.vue'
import DeleteOption from './editbutton/DeleteOption.vue'
import Up from './editbutton/Up.vue'
import Down from './editbutton/Down.vue'

export default {
  name:'OptionDesign',
  components: {
    InsertOption,
    DeleteOption,
    Up,
    Down,
  },
  data() {
   return {
   }
  },
  emits: ['addOption', 'deleteOption', 'changeDefault', 'changeDes', 'changeText', 'upmove', 'downmove'],
  methods: {
    addOption() {
      this.$emit('addOption')
    },
    deleteOption() {
      this.$emit('deleteOption')
    },
    changeDefault() {
      this.$emit('changeDefault', this.isDefault)
    },
    changeDes() {
      this.$emit('changeDes', {description: this.description, index: this.index})
    },
    changeText() {
      this.$emit('changeText', {text: this.text, index: this.index})
    },
    upmove() {
      this.$emit('upmove', this.index)
    },
    downmove() {
      this.$emit('downmove', this.index)
    }
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: ''
    },
    isDefault: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0,
    }
  },
}
</script>

<style scoped src='assets/css/editcss/optionDesign.css'>
  /* @import url('../css/optionDesign.css'); */
</style>